<template>
  <Layout class="sticky-header">
		<template slot="default">
			<div class="hero">
				<h1 class="hero-title">Simplicity. Aesthetics. Value.</h1>
				<h2 class="hero-subtitle">Hi there, I'm an independent Digital Designer &amp; Art Director focused on digital design for brands that like to have fun.</h2>
			</div>

			<div class="projects">
				<div class="project" v-for="(project, index) in projects" :key="index">
					<g-link class="project-link" :to="`/projects/${project.node.id} `">
					
						<g-image class="img" v-if="project.node.id == 1" src="../../static/img/1.jpg"></g-image>
						<g-image class="img" v-if="project.node.id == 5" src="../../static/img/2.jpg"></g-image>
						<g-image class="img" v-if="project.node.id == 3" src="../../static/img/3.jpg"></g-image>
						<g-image class="img" v-if="project.node.id == 4" src="../../static/img/4.jpg"></g-image>

						<h3 class="project-title">{{ project.node.name }}</h3>
						<div class="categories">
							<span class="category">photography</span>
							<span class="category">{{ project.node.Categories }}</span>
						</div>
					</g-link>
				</div>
			</div>
		</template>

		<template slot="list">
			<div>
				<div class="latest-journals-heading container"></div>
				<span class="label">Latest and greatest</span>
			</div>
			<div class="latest-journals">
				<div class="container" >
					<g-link v-for="post in $page.posts.edges" :key="post.node.id" class="journal" :to="`/journal/${post.node.id}`">
						<h3 class="journal-title">{{ post.node.title }}</h3>
					</g-link>
				</div>
			</div>
		</template>
  </Layout>
</template>

<page-query>
query {
  posts: allStrapiPost {
    totalCount 
    edges {
      node {
        id
        title
        content
        author
        date
      }
    }
  }

	allStrapiFruit {
    totalCount 
    edges {
      node {
        id
        name
        year
        Categories
      }
    }
  }
}

</page-query>

<script>
export default {
  metaInfo: {
    title: 'Home'
  },
	name: 'Home',
	data(){
		return {
			
		}
	},
	computed:{
		projects() {
			return this.$page.allStrapiFruit.edges || []
		}
	}
}
</script>

<style>
* {
    box-sizing: border-box;
}

.sticky-header {
  padding: 6rem 0 0;
}

.hero {
	text-align: center;
	width: 480px;
	max-width: 100%;
	margin: 0 auto;
	padding: 4rem 0 8rem;
}

.hero-title {
	font-size: 3rem;
	font-weight: 700;
	padding: 0;
	margin: 0 0 2rem;
}

.hero-subtitle {
	font-size: 1.15em;
	font-weight: 400;
	line-height: 1.68;
	opacity: .6;
}

.projects {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 4rem;
}

.project {
	grid-column: auto/span 2;
	text-align: center;
}

.categories {
	font-size: .8rem;
	color: #2b2b2b;
}

.category {
  margin-right: .8rem;
}

.latest-journals-heading {
    margin-top: 6rem;
    margin-bottom: 1rem;
    font-size: .6rem;
    font-weight: 400;
    text-transform: uppercase;
}
.label {
    display: block;
    font-weight: 700;
    margin-bottom: .5rem;
}
.latest-journals {
    max-width: 100%;
    margin: 0 2rem;
    border: 1px solid #f3f3f3;
}
.latest-journals>.container {
    display: flex;
    flex-wrap: wrap;
}
.journal {
    flex: 0 0 100%;
    display: block;
    padding: 2rem;
    transition: background .25s ease;
    text-decoration: none;
    border-bottom: 1px solid #f3f3f3;
}

.journal-title {
    font-size: 1rem!important;
    line-height: 1.35;
}

.journal:hover {
    background: #f3f3f3;
}

a {
	color: inherit;
}

.img {
	width: 100%;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}
*{
	box-sizing: border-box;
}

@media (min-width: 580px){
	.journal:first-child, .journal:nth-child(2) {
			border-bottom: 1px solid #f3f3f3;
	}

	.journal {
    flex: 0 0 50%;
	}
}

@media (min-width: 860px) {
	.container {
			padding: 0 6rem;
	}
}
	
@media (min-width: 920px){
	.latest-journals {
    margin: 0;
    border-left: 0;
    border-right: 0;
    border-top: 1px solid #f3f3f3;
    border-bottom: 1px solid #f3f3f3;
	}

	.journal:first-child, .journal:nth-child(2), .journal:nth-child(3) {
			border: 0;
			border-right: 1px solid #f3f3f3;
	}

	.journal {
			flex: 0 0 25%;
	}

	.project:nth-child(3n+1) {
    grid-column: auto/span 2;
	}
}
</style>
